<template>
  <van-form
    @submit="submitForm"
    @failed="ONFailed"
    ref="ruleFormRef"
    :model="form"
  >
    <van-cell-group>
      <van-field
        v-model="form.username"
        label="账号："
        aria-placeholder="请输入账号"
        clearable
        name="username"
        :rules="usernameRules"
      >
      </van-field>
    </van-cell-group>
    <van-cell-group>
      <van-field
        v-model="form.password"
        label="密码："
        placeholder="请输入密码"
        type="password"
        clearable
        name="password"
        :rules="passwordRules"
      ></van-field>
    </van-cell-group>
    <van-cell-group>
      <van-button block round type="primary" native-type="submit"
        >登录</van-button
      >
    </van-cell-group>
  </van-form>
</template>
<script setup>
import { valueEquals } from "element-plus";
import { ref, reactive } from "vue";
const form = reactive({
  username: "demo1",
  password: "123456"
});
const ruleFormRef = ref();
const usernameRules = [
  { required: true, message: "用户名不能为空" },
  { pattern: /^\w{3,16}$/, message: "用户名长度3-16字符" }
];
const passwordRules = [
  { required: true, message: "密码不能为空" },
  { pattern: /^\w{6,16}$/, message: "密码长度6-16字符" }
];
const submitForm = async (values) => {
  console.log(values);
};
const ONFailed = (errorInfo) => {
  console.log("failed", errorInfo);
};
</script>

<style></style>
